<template>
  <div>
    <el-skeleton v-if="!operator" :loading="true" animated :count="3">
      <template #template>
        <el-card>
          <template #header>
            <div class="flex justify-between items-center">
              <el-skeleton-item variant="h1" style="width: 30%" />
              <el-skeleton-item variant="button " style="width: 150px" /></div
          ></template>
          <el-skeleton-item variant="p" style="width: 50%" />
          <div class="mt-4">
            <el-skeleton-item variant="p" style="width: 40%" />
          </div>
        </el-card>
      </template>
    </el-skeleton>

    <div v-else>
      <functioncfg :operator-id="operatorId" />
      <userLevel :operator-id="operatorId" />
      <tofacfg :operator-id="operatorId" />
      <notification :operator-id="operatorId" />
      <map-api :operator-id="operatorId" :operator="operator" />
      <downloadcfg :operator="operator" />
      <oa-vue v-if="operator.operatorType === 'NORMAL'" />
      <flydeskcfg :operator-id="operatorId" />
      <flyparameter :operator-id="operatorId" />
      <blocklist :operator-id="operatorId" />
      <whitelist :operator-id="operatorId" />
      <sale />
      <!--      <fly-key-config :operator-id="operatorId" :operator="operator" />-->
    </div>
  </div>
</template>

<script>
import Functioncfg from './profile/functioncfg.vue'
import UserLevel from './profile/user-level.vue'
import Tofacfg from './profile/2facfg.vue'
import { getOperatorInfo } from '@/api/operator'
import MapApi from './profile/map-api.vue'
import Downloadcfg from './profile/downloadcfg.vue'
import OaVue from './profile/oa.vue'
import Sale from './profile/sale.vue'
import Flydeskcfg from './profile/flydeskcfg.vue'
import Blocklist from './profile/blocklist.vue'
import Whitelist from './profile/whitelist.vue'
import Notification from './profile/notification.vue'
import FlyKeyConfig from '@/views/operator/components/operator/profile/fly-key-config'
import Flyparameter from '@/views/operator/components/operator/profile/flyparameter'

export default {
  components: {
    FlyKeyConfig,
    Flyparameter,
    Functioncfg,
    UserLevel,
    Tofacfg,
    MapApi,
    Downloadcfg,
    OaVue,
    Flydeskcfg,
    Blocklist,
    Whitelist,
    Notification,
    Sale
  },
  data() {
    return {
      operatorId: this.$route.params.operatorId,
      operator: null
    }
  },

  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getOperatorInfo()
    },
    getOperatorInfo() {
      getOperatorInfo(this.operatorId)
        .then((res) => {
          this.operator = res
        })
        .catch(this.$confirmError)
    }
  }
}
</script>
<style lang="scss">
.operator-button-card {
  margin:12px 24px;
  .el-card__header {
    padding:12px 16px;
  }
}
.operator-button-label{
  color:var(--el-color-primary);
  font-size: 14px;
  line-height:24px;
  
}
</style>
<style lang="scss" scoped>
.l-card {
  margin: 20px 36px;
}

.toolbar-text {
  /*color: #ccd3d9;*/
  --tw-text-opacity: 1;
  color: rgba(149, 170, 201, var(--tw-text-opacity));
}

</style>
